[Android Tips] 2つの Android Bootstrap で爆速開発！

Android Bootstrap

Bootstrap といえば Twitter Bootstrap が有名ですが、Android の世界では2つの Bootstrap があります。Android Bootstrap と Android Bootstrap です。そう、見事なまでにコンフリクトしております。どちらも Android のアプリ開発を高速化するためのツールですが、役割は違います。具体的に言うと、1つはデザインのアセットをいい感じに作ってくれるもの、もう一つはよく使いそうなライブラリをいい感じにセットにしてくれるものです。それぞれ、ちょっと気になっていたので軽く使ってみました。

デザインのアセットをサクッと作る

https://github.com/Bearded-Hen/Android-Bootstrap

まずは UI デザインを何となくいい感じに作ってくれる Android Bootstrap を使ってみましょう。具体的には Twitter Bootstrap でも使われている FontAwesome の 369 個のアイコンが使えるほか、何となくカッコイイボタンや画像を円形に切り取って表示するなどといった「なんかカッコイイデザイン」がサクッと作れるようになります。ノンデザイナーのかたにはとてもありがたいですね。

アプリケーションプロジェクトで使えるようにするには、まずGitHub リポジトリから Clone してインポートしてアプリケーションプロジェクトから参照します。Gradle にも対応しているようなので、Android Studio でも難なく使うことができます。そしてリポジトリ内にある fontawesome-webfont.ttf ファイルをアプリケーションプロジェクトの assets フォルダにコピーして準備完了です。

では早速レイアウトファイルに View を配置してみましょう。次のような View を使うことができます。

View	役割
com.beardedhen.androidbootstrap.BootstrapButton	アイコン付きのボタンや角丸ボタン
com.beardedhen.androidbootstrap.FontAwesomeText	FontAwesome を利用したアイコンとアニメーション
com.beardedhen.androidbootstrap.BootstrapEditText	入力テキスト
com.beardedhen.androidbootstrap.BootstrapThumbnail	枠付きのサムネイル画像
com.beardedhen.androidbootstrap.CircleThumbnail	枠付きの円形のサムネイル画像

それぞれの View を次のような感じで配置してみました。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bootstrap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- ボタン -->
    <com.beardedhen.androidbootstrap.BootstrapButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Success"
        bootstrap:be_roundedCorners="true"
        bootstrap:bb_icon_right="fa-android"
        bootstrap:bb_type="success" />

    <!-- テキスト(アイコン) -->
    <com.beardedhen.androidbootstrap.FontAwesomeText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="32sp"
        bootstrap:fa_icon="fa-github" />

    <!-- 入力テキスト -->
    <com.beardedhen.androidbootstrap.BootstrapEditText
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:hint="rounded"
        bootstrap:be_roundedCorners="true"
        bootstrap:be_state="success" />

    <!-- サムネイル -->
    <com.beardedhen.androidbootstrap.BootstrapThumbnail
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        bootstrap:bt_height="80dp"
        bootstrap:bt_image="@drawable/image"
        bootstrap:bt_width="150dp" />

    <!-- サムネイル(円形) -->
    <com.beardedhen.androidbootstrap.BootstrapCircleThumbnail
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        bootstrap:bct_image="@drawable/image"
        bootstrap:bct_size="large" />

</LinearLayout>

実行するとこんな感じで表示されます！

更に詳しい解説はこちらで述べられていますので、興味のある方は参照してください。

よく使うライブラリ群をまるっと使う

http://www.androidbootstrap.com/

次に、よく使いそうなライブラリをまとめて一気に新規プロジェクトとして生成してくれるお手軽プロジェクト作成ツールの Android Bootstrap を使ってみたいと思います。具体的には NavigationDrawer の実装や ViewPageIndicator などのような便利な UI 系ライブラリ、http-request や google-gson といった便利なロジック系のライブラリなどが含まれます。含まれているライブラリは次の通りです。かなりいろいろつめ込まれています。

ライブラリ	機能
AppCompat	ActionBar などの公式サポートライブラリ
ViewPageIndicator	ViewPager にインジケータを付けるライブラリ
NineOldAndroids	アニメーションのサポート
NavigationDrawer	UI パターンである Drawer ナビゲーションの実装
Dagger	DI コンテナ
ButterKnife	View のインジェクション
Otto	クラス間の Pub / Sub メッセージング
Robotium	シナリオテストの自動化
maven-android-plugin	リリースビルドの生成
http-request	HTTP 通信処理の簡素化
google-gson	JSON のパース処理の簡素化

それでは使ってみましょう。まずこちらにアクセスし、アプリ名とパッケージ名を入力して「Generate Your App」をクリックします。

すると Zip ファイルがダウンロードできたと思います。これがプロジェクトファイルです。解凍すると Android Studio 用のプロジェクトフォルダになっているので、Android Studio でインポートします。Gradle のバージョンは v1.10 以上でなければいけない点だけ注意してください。

ビルドが成功したら、まずは実行してみましょう。謎のログイン画面が表示されるはずです。

これは実際に Android Bootstrap 側で用意してくれているテスト用の Web サーバーに対するログインが実装されています。ちなみにテスト用の Web サーバーは Parse が使われているようです(通信処理は Parse の SDK ではなく、http-request を使って処理されています)。テスト用のログインアカウントはユーザー名が「demo@androidbootstrap.com」で、パスワードが「android」です。ログインしてみます。

ログインしてみました。ViewPager で作られた画面が表示され、謎のユーザーリストが表示されています。これは実際にテスト用の Web サーバーに問い合わせて取得しています。つまり「Web サーバーに HTTP 通信して取得した JSON オブジェクトをパースして ListView に表示する」という実装がどのように行われているか理解するとともに、これを元に自分のサービス用の実装を作り始められるというわけですね。

左右の「News」と「Check In's」はニュースフィードとチェックインを想定した作りになっていて、こちらも単純なレコードの取得が行われています。

あと何故かタイマーがついています。このタイマーは Service を使った実装になっているので、Service を使った非同期処理を実装したいときの参考になります。

クラス構成は結構入り組んだ感じになっていますが、中のクラスの処理はかなりシンプルなのでカスタマイズしやすいと思います。

まとめ

ということで、Android アプリを爆速で開発するために使えそうな便利ツール(ライブラリ)の紹介でした。すべてを1から用意するのは大変なので、こういったライブラリで省略できるところは省略していきたいですね。